<template>
  <div class="user-auth">
    <a-card :body-style="{ padding: '32px' }" :bordered="false">
      <div class="auth-title">
        <div class="title">项目信用申请 - 2.材料上传</div>
        <div class="desc">
          请提前准备好如下相关电子文件档，如不了解，请联系客服电话：{{
            config.p_phone
          }}
        </div>
      </div>
      <div class="auth-content">
        <a-steps :current="1">
          <a-step
            v-for="item in [
              '材料准备',
              '材料信息上传',
              '基本信息填写',
              '完成待审核',
              '项目信用申请成功'
            ]"
            :key="item"
            :title="item"
          />
        </a-steps>
        <a-form-model
          :model="model"
          ref="form"
          :rules="rules"
          style="margin-top: 40px;"
          :label-col="{ span: 10 }"
          :wrapper-col="{ span: 8 }"
          @submit="onSubmit"
        >
          <a-form-model-item
            :label="rules.bidOntract[0].title"
            prop="bidOntract"
          >
            <Upload v-model="model.bidOntract" text="" />
          </a-form-model-item>

          <a-form-model-item
            :label="rules.tenderFile[0].title"
            prop="tenderFile"
          >
            <Upload v-model="model.tenderFile" text="" />
          </a-form-model-item>

          <a-form-model-item :label="rules.bidFile[0].title" prop="bidFile">
            <Upload v-model="model.bidFile" text="" />
          </a-form-model-item>

          <a-form-model-item :label="rules.conCer[0].title" prop="conCer">
            <Upload v-model="model.conCer" text="" />
          </a-form-model-item>
          <a-form-model-item :label="rules.planCer[0].title" prop="planCer">
            <Upload v-model="model.planCer" text="" />
          </a-form-model-item>

          <a-form-model-item :label="rules.saveCer[0].title" prop="saveCer">
            <Upload v-model="model.saveCer" text="" />
          </a-form-model-item>

          <a-form-model-item
            :label="rules.creditReport[0].title"
            prop="creditReport"
          >
            <Upload v-model="model.creditReport" text="" />
          </a-form-model-item>

          <a-form-model-item
            :label="rules.commitment[0].title"
            prop="commitment"
          >
            <Upload v-model="model.commitment" text="" />
          </a-form-model-item>

          <a-form-model-item
            :label="rules.authClientBook[0].title"
            prop="authClientBook"
          >
            <Upload v-model="model.authClientBook" text="" />
          </a-form-model-item>

          <a-form-model-item
            :label="rules.payCommitLetter[0].title"
            prop="payCommitLetter"
          >
            <Upload v-model="model.payCommitLetter" text="" />
          </a-form-model-item>

          <a-form-model-item
            :label="rules.holderCommitLetter[0].title"
            prop="holderCommitLetter"
          >
            <Upload v-model="model.holderCommitLetter" text="" />
          </a-form-model-item>

          <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
            <a-button size="large" style="margin-right: 12px;" @click="prev">
              上一步
            </a-button>
            <a-button htmlType="submit" type="primary" size="large">
              下一步
            </a-button>
          </a-form-item>
        </a-form-model>
      </div>
    </a-card>
  </div>
</template>

<script>
import Upload from "@/components/upload/Upload";
import storage from "@/utils/storage";

const MODEL = {
  bidOntract: "",
  tenderFile: "",
  bidFile: "",
  conCer: "",
  planCer: "",
  saveCer: "",
  creditReport: "",
  commitment: "",
  authClientBook: "",
  payCommitLetter: "",
  holderCommitLetter: ""
};

export default {
  data() {
    return {
      model: storage.getItem("PROJECT_APPLY_STEP2") || { ...MODEL }
    };
  },
  components: {
    Upload
  },
  watch: {
    model: {
      handler() {
        storage.setItem("PROJECT_APPLY_STEP2", this.model);
      },
      deep: true
    }
  },
  computed: {
    rules() {
      return {
        bidOntract: [
          {
            title: "1. 项目中标合同",
            required: true,
            message: "请上传项目中标合同",
            trigger: "submit"
          }
        ],
        tenderFile: [
          {
            title: "2. 项目招投标文件",
            required: true,
            message: "请上传项目招投标文件",
            trigger: "submit"
          }
        ],
        bidFile: [
          {
            title: "3. 中标通知书",
            required: true,
            message: "请上传中标通知书",
            trigger: "submit"
          }
        ],
        conCer: [
          {
            title: "4. 项目施工许可证",
            required: true,
            trigger: "submit",
            message: "请上传项目施工许可证"
          }
        ],
        planCer: [
          {
            title: "5. 项目规划许可证",
            required: true,
            trigger: "submit",
            message: "请上传项目规划许可证"
          }
        ],
        saveCer: [
          {
            title: "6. 建筑施工安全生产许可证",
            required: true,
            message: "请上传建筑施工安全生产许可证",
            trigger: "submit"
          }
        ],
        creditReport: [
          {
            title: "7. 企业信用报告",
            required: true,
            message: "请上传企业信用报告",
            trigger: "submit"
          }
        ],
        commitment: [
          {
            title:
              "8. 项目经理、技术负责人和施工管理负责人签字样式确认以及承诺书",
            required: true,
            message:
              "请上传项目经理、技术负责人和施工管理负责人签字样式确认以及承诺书",
            trigger: "submit"
          }
        ],
        authClientBook: [
          {
            title: "9. 施工企业授权委托书",
            required: true,
            message: "请上传施工企业授权委托书",
            trigger: "submit"
          }
        ],
        payCommitLetter: [
          {
            title: "10. 项目唯一指定结算账户确认书以及承诺函",
            required: true,
            message: "请上传项目唯一指定结算账户确认书以及承诺函",
            trigger: "submit"
          }
        ],
        holderCommitLetter: [
          {
            title: "11. 控股股东或实控连带担保承诺函",
            required: true,
            message: "控股股东或实控连带担保承诺函",
            trigger: "submit"
          }
        ]
      };
    }
  },
  methods: {
    prev() {
      this.$router.go(-1);
    },
    onSubmit(e) {
      e.preventDefault();
      this.$refs.form.validate(async valid => {
        if (valid) {
          this.$router.push("/project/apply/step3");
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.user-auth {
  /deep/.ant-form-item-label {
    white-space: break-spaces;
  }
  .auth-title {
    padding-left: 30px;
    margin-bottom: 30px;

    .title {
      font-size: 18px;
      font-weight: bold;
      border-bottom: 1px solid @border-color;
      color: @primary-color;
      padding-bottom: 4px;
    }

    .desc {
      padding-top: 8px;
      font-size: 16px;
      color: @text-color-2;
    }
  }

  .auth-content {
    width: 880px;
    padding: 10px 20px;
    margin: 0 auto;
  }
}

.upload-wrapper {
  display: flex;
  color: @primary-color;
  align-items: center;

  .example-wrapper {
    cursor: pointer;
    .icon-right {
      width: 10px;
      height: 10px;
    }
  }
}
</style>
